﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    var proPic = ViewBag.ProPic as List<BuyWithoutLoseMoney.Core.Models.ProductPic>;
    var comment = ViewBag.Comment as List<BuyWithoutLoseMoney.Core.Models.Comment>;
    var user = ViewBag.User as User;
}
@model Product
<el-main>
    <el-card style="width:100%;">
        <div slot="header" class="clearfix">
            <span>
                <a asp-controller="products" asp-action="Index">
                    <i class="el-icon-d-arrow-left"></i>所有产品
                </a>
            </span>
        </div>
        <el-row :gutter="20">
            <el-col :span="11" style="border-right: 1px solid #4c4c4c;">
                @foreach (var pic in proPic.Where(x => x.ProductId == Model.Id && x.PicType == 1))
                {
                    <img src="@pic.PicAddress" style="border-radius: 15px;" class="image" width="400px" height="400px" style="padding-left: 11%;">
                }
            </el-col>
            <el-col :span="13">
                <table class="layui-table" lay-skin="nob">
                    <colgroup>
                        <col width="30%">
                        <col width="70%">
                    </colgroup>
                    <tr>
                        <th colspan="2" style="font-size: 15px;text-align:center">
                            <h1>@Model.Title</h1>
                        </th>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td style="font-size:25px ;">价格：</td>
                        <td style="font-size:25px ;color: orangered;">￥@Model.Price</td>
                    </tr>
                    <tr>
                        <td>描述：</td>
                        <td>@Model.SubTitle</td>
                    </tr>
                    <tr>
                        <td>品牌：</td>
                        <td>@Model.Brand</td>
                    </tr>
                    <tr>
                        <td>评分:</td>
                        <td>
                            <el-rate v-model="value"
                                     disabled
                                     show-score
                                     text-color="#ff9900"
                                     score-template="{value}">
                            </el-rate>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <form class="layui-form">
                                <input type="hidden" name="UserId" value="@user.Id" autocomplete="off" class="layui-input">
                                <input type="hidden" name="TotalMoney" value="@Model.Price" autocomplete="off" class="layui-input">
                                <input type="hidden" name="Status" value="1" autocomplete="off" class="layui-input">
                                <input type="hidden" name="ReceivingType" value="圆通" autocomplete="off" class="layui-input">
                                <input type="hidden" name="ReceivingAddress" value="" autocomplete="off" class="layui-input">
                                <input type="hidden" name="Paymethod" value="微信" autocomplete="off" class="layui-input">
                                <input type="hidden" name="Ext1" value="@Model.Id" autocomplete="off" class="layui-input">
                                <button type="submit" id="orderbtn" class="layui-btn layui-btn-warm" lay-submit lay-filter="addForm">购物车</button>
                            </form>
                        </td>
                       @*<td>
                            <template>
                                <el-input-number v-model="num" @@change="handleChange" :min="1" label="描述文字"></el-input-number>
                            </template>
                        </td>*@
                        <td><button type="button" id="add" class="layui-btn layui-btn-danger">购买</button></td>
                    </tr>
                </table>
            </el-col>
        </el-row>

        <div style="padding-top:20px">
            <hr />
            <template>
                <el-tabs v-model="activeName" type="card">
                    <el-tab-pane label="相关图片" name="first">
                        @foreach (var pic in proPic.Where(x => x.ProductId == Model.Id))
                        {
                            <img src="@pic.PicAddress" style="border-radius: 15px;" class="image" width="100%" height="100%" style="padding-left: 11%;">
                        }
                    </el-tab-pane>
                    <el-tab-pane label="商品介绍" name="second">
                        <div class="clearfix">
                            <ul>
                                <li id="sh">关于我们<em></em></li>
                                <li>品牌历史</li>
                                <li>常见问题</li>
                                <li>加入我们</li>
                            </ul>
                            <ul>
                                <li id="sh">客服服务</li>
                                <li>联系客服</li>
                                <li>免费配送</li>
                                <li>关于下单</li>
                            </ul>
                        </div>

                    </el-tab-pane>
                    <el-tab-pane label="商品评价" name="third">
                        @*添加评论*@
                        <div class="layui-card">
                            <div class="layui-card-body">
                                <form class="layui-form">
                                    <input type="hidden" name="Name" value="@user.UserName" autocomplete="off" class="layui-input">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label"></label>
                                        <div class="layui-input-block">
                                            <textarea name="Content" placeholder="请输入内容" class="layui-textarea" style="width:500px"></textarea>
                                        </div>
                                    </div>
                                    <input type="hidden" name="ProductId" required lay-verify="required" value="@Model.Id" autocomplete="off" class="layui-input">
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button class="layui-btn" lay-submit lay-filter="addComment">评论</button>
                                            <button type="reset" class="layui-btn layui-btn-primary">清除内容</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                        @foreach (var item in comment.Where(x => x.ProductId == Model.Id))
                        {
                            <el-card class="box-card" style="margin-left:10%;margin-right:10%;">
                                <el-row :gutter="20">
                                    <el-col :span="4">
                                        <div class="grid-content bg-purple">
                                            <img src="/img/logo2.png" alt="" width="100px">
                                        </div>
                                    </el-col>
                                    <el-col :span="20">
                                        <div class="grid-content bg-purple" style=" font-size: 30px;">
                                            @item.Content
                                        </div>
                                        <div style="padding-top: 20px;" class="pinglun">
                                            <ul>
                                                <li>@Model.Title</li>
                                                <li><span>@item.CreateTime</span></li>
                                                <li>
                                                    <i class="layui-icon layui-icon-praise"></i>0
                                                </li>
                                                <li>
                                                    <i class="layui-icon layui-icon-tread"></i>0
                                                </li>
                                            </ul>

                                        </div>
                                    </el-col>
                                </el-row>
                            </el-card>
                        }

                    </el-tab-pane>
                    <el-tab-pane label="商家保障" name="fourth">
                        <div style="margin-left:20%;margin-right:20%;">@Model.Describe</div>

                    </el-tab-pane>
                </el-tabs>
            </template>
        </div>

    </el-card>
</el-main>
<script>
    layui.use(["form", 'layer'], function() {
        var form = layui.form;
        var $ = layui.$;
        var layer = layui.layer;
        //评论的添加
        form.on('submit(addComment)', function(data) {
            $.post("/products/ProDetails", data.field, function(res) {
                if (res.isSuccess) {
                    layer.msg(res.msg, function() {
                        window.location.href = "/products/prodetails/" + @Model.Id;
                    });
                } else {
                    layer.msg(res.msg);
                }
            })
            return false;
        });
        //购物车添加
        form.on('submit(addForm)', function(data) {
            $.post("/order/AddCart", data.field, function(res) {
                if (res.isSuccess) {
                    layer.msg(res.msg, function() {
                        parent.window.location.href = "/products/prodetails/" + @Model.Id;
                    });
                } else {
                    layer.msg(res.msg);
                }
            });
            return false;
        });
        //购买
        $("#add").on("click", function() {
            var index = layer.open({
                type: 2,//0:信息框，1：页面层，2：iframe层，3：加载层，4：tip层
                content: '/order/create/' + @Model.Id,
                area: ["40%", "50%"]
            });
        })
    })
</script>